import React, { FC, useState, useEffect } from "react";
import QuestionCard from "../../components/QuestionCard";
import { produce } from "immer";
import { Typography, Empty, Spin } from "antd";
import { message } from "antd";
import classNames from "classnames/bind";
import style from "./index.module.scss";
import SearchInput from "../../components/SearchIput";
import useGetQuestionByKey from "../../hooks/useGetQuestionByKey";
import PaginationConfig from "../../components/PaginationConfig";
const { Title } = Typography;
const bindclassNames = classNames.bind(style);
const QuestionStart: FC = () => {
  const [messageApi, contextHolder] = message.useMessage();
  //问卷列表数据
  interface questionItem {
    id: string;
    title: string;
    isPublished: boolean;
    isStart: boolean;
    isDelete: boolean;
    answerCount: number;
    createTime: string;
  }
  type resType = {
    list: questionItem[];
    total: number;
  };
  // const roiginData: questionItem[] = [
  //   { id: "q1", title: "问卷1", isPublished: false, isStart: true, answerCount: 5, createTime: "10月5日 13:32" },
  //   { id: "q2", title: "问卷2", isPublished: false, isStart: true, answerCount: 5, createTime: "10月5日 13:32" },
  //   { id: "q3", title: "问卷3", isPublished: true, isStart: true, answerCount: 5, createTime: "10月5日 13:32" },
  // ];

  // const [questionData, setquestionData] = useState(roiginData);

  //useeffect
  // useEffect(() => {}, []);

  // useEffect(() => {}, [questionData]);

  const { data = {}, loading } = useGetQuestionByKey({ isStart: true });
  const { list = [], total = 0 } = data as resType;

  const deletequestionData = (id: string) => {
    // setquestionData(
    //   produce((draft) => {
    //     const index = draft.findIndex((item: questionItem) => {
    //       return item.id == id;
    //     });
    //     draft.splice(index, 1);
    //     console.log("删除成功");
    //     messageApi.open({
    //       type: "success",
    //       content: "删除成功",
    //     });
    //   }),
    // );
  };

  const publishquestionDate = (id: string) => {
    // setquestionData(
    //   produce((draft) => {
    //     const index = draft.findIndex((item: questionItem) => {
    //       return item.id == id;
    //     });
    //     draft[index].isPublished = true;
    //   }),
    // );
  };

  const startquestionData = (id: string, flag: boolean) => {
    // setquestionData(
    //   produce((draft) => {
    //     const index = draft.findIndex((item: questionItem) => {
    //       return item.id == id;
    //     });
    //     draft[index].isStart = flag;
    //   }),
    // );
  };

  return (
    <div className={bindclassNames("QuetionList")}>
      {contextHolder}
      <div className={bindclassNames("head")}>
        <Title level={3} className={bindclassNames("left")}>
          星标问卷
        </Title>
        <div className={bindclassNames("right")}>
          {/* <input className={bindclassNames("searcInput")}></input> */}
          <SearchInput></SearchInput>
        </div>
      </div>
      <Spin spinning={loading}>
        <div className={bindclassNames("middle")}>
          {list.length == 0 ? (
            <Empty description="暂无数据" />
          ) : (
            list.map((item: questionItem) => {
              return (
                <QuestionCard
                  {...item}
                  key={item.id}
                  startquestionData={startquestionData}
                  deletequestionData={deletequestionData}
                  publishquestionDate={publishquestionDate}
                ></QuestionCard>
              );
            })
          )}
        </div>
      </Spin>
      <div className={bindclassNames("foot")}>
        <PaginationConfig total={total}></PaginationConfig>
      </div>
    </div>
  );
};

export default QuestionStart;
